<template>
  <div>
    <div>
        <el-button type="primary" @click="selectAllRows">全选</el-button>
        <el-button type="info" @click="clearSelection">取消选择</el-button>
        <el-button type="danger" @click="deleteSelected">删除选中</el-button>
    </div>
    <el-table :data="tableData"ref="userTable"  @selection-change="handleSelectionChange" style="width: 100%; margin-top: 15px;" >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="120" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <span style="color: #409eff; font-weight: bold;">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
      <el-table-column prop="gender" label="性别" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.gender === '男' ? 'primary' : 'danger'">{{ scope.row.gender }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100" align="center" sortable></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="status" label="状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '在职'" type="success">在职</el-tag>
          <el-tag v-else-if="scope.row.status === '离职'" type="info">离职</el-tag>
          <el-tag v-else type="warning">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'D',
  data() {
    return {
      selectedRows: [],
      tableData: [
        {
          id: 'A001',
          name: '张三',
          date: '2023-06-15',
          gender: '男',
          age: 28,
          address: '北京市朝阳区建国门外大街1号',
          status: '在职'
        },
        {
          id: 'A002',
          name: '李四',
          date: '2023-07-22',
          gender: '男',
          age: 32,
          address: '上海市浦东新区张江高科技园区',
          status: '在职'
        },
        {
          id: 'A003',
          name: '王芳',
          date: '2023-05-10',
          gender: '女',
          age: 25,
          address: '广州市天河区珠江新城',
          status: '在职'
        },
        {
          id: 'A004',
          name: '陈明',
          date: '2023-04-18',
          gender: '男',
          age: 45,
          address: '深圳市南山区科技园南区',
          status: '离职'
        },
        {
          id: 'A005',
          name: '刘婷',
          date: '2023-08-30',
          gender: '女',
          age: 29,
          address: '杭州市西湖区文三路',
          status: '在职'
        }
      ],
      selectId:[]

    }
  },
  methods: {
    // 处理选择变化
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      // 把选中的数据进行过滤
      console.log("=====this.selectedRows所有选择的集合=======> ",this.selectedRows);

      // 把选中的数据进行过滤在职的id过滤出来
      this.selectedRows = selection.filter(item =>item.status === '在职');
      console.log("=====this.selectedRows所有选择的在职集合=======> ",this.selectedRows);
      this.selectedRows = this.selectedRows.map(item => item.id);
      console.log("=====this.selectedRows所有选择的在职的id集合=======> ",this.selectedRows);
      // 获取选中的id
      this.selectId = selection.map(item => item.id);
      console.log("======this.selectId选中的ID======> ",this.selectId);

    },

    // 全选/取消全选
    selectAllRows() {
      this.$refs.userTable.toggleAllSelection();
    },

    // 清除所有选择
    clearSelection() {
      this.$refs.userTable.clearSelection();
    },

    // 删除选中数据
    deleteSelected() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的数据');
        return;
      }
    }
  }
}
</script>

<style>

</style>
